<template>
	<view v-if="Object.keys(songData).length !=0">
		<!-- 小程序头 -->
		<musichead class="top-list-head-left" :toshow="true" :title="songName" :color="titleFontColor"></musichead>
		<!-- 背景图片 -->
		<view class="fixbg"  :style="{ 'background-image': 'url('+songData.data.songs[0].al.picUrl+')'}" ></view>
		<view class="fixbg2"></view>
		<!-- 可滚动区域 -->
		<scroll-view :style="{height: `${canScrollHeight}` }"  scroll-y="true"  class="scroll-container" >
			
			<!-- 播放图片区域 -->
			<view class="bofang-area">
				<view class="bofang-area-on">
					<!-- <image :class="{'notplay': !isPlay}" src="../../static/needle-bar.png"></image> -->
					<image :class="{'notplay': !isPlay}" src="../../static/needle.png" mode=""></image>
				</view>
				<view class="bofang-area-bg">
					<view class="bofang-area-image">
						<image :class="{'play': isPlay}" :src="songData.data.songs[0].al.picUrl" ></image>
						<text @tap="toPlay" v-show="!isPlay"  class="iconfont icon-icon_bofang"></text>
						<text @tap="toPlay" v-show="isPlay" class="iconfont icon-zanting"></text>
					</view>
				</view>
			</view>
			
			<!-- 歌词区域 -->
			<view class="lyric-area">
				<view class="song-word" :style="{ transform: 'translateY('+ -((lyricIndex-1)*74)+'rpx)'}"  >
					<view :class="{ 'active-word': lyricIndex==index}" 
				v-for="(item, index) in lyricList" :key="index">{{item.lyric}}</view>
				</view>
			</view>
			
			<!-- <view class="dowload-app"><a href="">在网易云音乐查看更多歌词</a></view> -->
			
			<!-- 分享好友组件 -->
			<!-- #ifdef MP-WEIXIN -->
			<sharefriend></sharefriend>
			<!-- #endif -->
			
			<!-- 猜你喜欢区域 -->
			<view class="do-you-like" v-if="similarSong.length != 0">
				<view class="do-you-like-text" >
					<text>喜欢这首歌的人也听</text>
					<text @tap="playList(similarSong)" class="iconfont icon-icon_bofang"><text>一键收听</text></text>
					
				</view>
			
				<view @tap="playOther(item.id)" class="do-you-like-item" v-for="(item, index) in similarSong" :key="index">
					<view>
						<image :src="item.album.picUrl"></image>
					</view>
					<view>
						<text>{{item.name}}</text>
						<view>
							<text>{{item.album.artists[0].name}} - {{item.name}}</text>
						</view>
					</view>
					<view><text class="iconfont icon-icon_bofang"></text></view>
				</view>
							
			</view>
		
			<!-- 用户评论组件 -->
			<view class="user-talk">
				<view><text>精彩评论</text></view>
			
				<view class="user-talk-item" v-for="(comment, index) in commentList" :key="index">
					<!-- 用户信息 -->
					<view class="user-info">
						<!-- 头像 -->
						<view>
							<image :src="comment.user.avatarUrl" mode=""></image>
						</view>
						<!-- 用户名+发表时间 -->
						<view>
							<text>{{comment.user.nickname}}</text>
							<view>{{comment.time | formatDate}}</view>
						</view>
						<!-- 点赞数量 -->
						<view class="dianzan">
							<text>{{comment.likedCount}}</text>
							<text class="iconfont icon-appreciate"></text>
						</view>
					</view>
					<!-- 用户评论 -->
					<view >
						<text>{{comment.content}}</text>
					</view>
					<view class="isline"></view>
				</view>
				
			</view>
		
		</scroll-view>
		
	</view>
</template>

<script>
	import sharefriend from "../../components/sharefriend/sharefriend.vue"
	
	import db from "../../common/music-api.js"
	
	export default {
		data() { 
			return {
				titleFontColor: "#fff",
				// titleFontColor: "black",
				isPlay: true,
				songId: '347230',
				//songData.data.songs[0].al.picUrl
				songData: {data:{songs:[{al:{picUrl:''}}]}},
				songName: '',
				similarSong:[],
				commentList: [],
				lyricList:[],
				lyricIndex: 0,
				onPauseLyricIndex: 0,
				songUrl:'',
				audioIns: '',
				timerList: [], //歌词定时器列表
			}
		},
		props: {
			songIdInH5: {
				type: String,
				default: '1495058484'
			}
		},
		components: {
			sharefriend,
		},
		computed: {
			canScrollHeight() {
				
				return this.$store.getters.canScrollHeight + 'px'
			},
			
		},
		methods: {
			toPlay() {
				
				if(this.isPlay){
					this.audioIns.pause()
				}else {
					this.audioIns.play()
					//清除歌词
					
					
				}
				this.isPlay = !this.isPlay
			},
			
			
			
			
			//把歌词时间都转换为秒 
			formatLyricDate(value) {
				let arr = value.split(":")
				return (parseFloat(arr[0]*60)+parseFloat(arr[1])).toFixed(1)
			},
			//滚动歌词
			showLyric() {
				
				let timerList = []
				//音频播放的时长
				for(let i=0; i < this.lyricList.length; i++) {
					if(i >= this.lyricList.length-1) {
						console.log("歌词结束了")
						i = 0
						break
					}
					this.syncLyric(i,timerList)
				}
				
				
				
				console.log(this.timerList)
			},
			//歌词索引方法
			syncLyric(index,timerList) {
				
				// console.log(this.lyricList[index].lyric)
				let end = setTimeout(() => {
					this.lyricIndex = index
					console.log(this.lyricIndex)
				},(this.lyricList[index].time*1000 - 30)) //减去200毫秒
				timerList.push(end)
				this.timerList = timerList
				
				//提交当前页实例，点击主页后清除后台
				this.$store.commit('setcureentPlayInsTimer',this.timerList)
			},
			//清除定时器
			cancelsetTimeout() {
				for(let item of this.timerList) {
					clearTimeout(item)
					item = 0
					
				}
				this.timerList = [] //清除定时器列表
				
			},
			//页面内切换猜你你喜欢歌曲
			playOther(id) {
				this.cancelsetTimeout() //清除定时器
				this.lyricIndex = 0 //重置歌词索引
				console.log("准备换歌曲了"+id)
				this.songId = id
				this.getMusic(this.songId)
			},
			getMusic(songId) {

				this.cancelsetTimeout()
				//提交songId,改变下一首id的值
				this.$store.commit('nextId',songId)
				
				console.log(this)
				
				
				Promise.all([db.getSongDetail(songId),db.getLyric(songId),db.getSimilarSong(songId),db.getComment(songId),db.getSongUrl(songId)]).then(res => {
					//获取歌名
					if(res[0].data.code == 200) {
						console.log(res[0])
						this.songData = res[0]
						this.songName = res[0].data.songs[0].name
					}
					//获取歌词列表
					if(res[1].data.code == 200 ) {
						let lyric = res[1].data.lrc?.lyric
						let re = /\[([^\]]+)\]([^\[]+)/g;
						if(lyric != undefined) {
							//清空歌词列表
							this.lyricList = []
							// 清除歌词滚动定时器
							this.cancelsetTimeout()
							lyric.replace(re, ($0, $1, $2)=>{
								if($2 != '\n') {
									this.lyricList.push({'time':this.formatLyricDate($1), 'lyric':$2})
								}
							})
						}
						
						
						console.log(this.lyricList)
					}
					//获取推荐歌曲列表
					if(res[2].data.code == 200) {
						console.log(res[2])
						this.similarSong = res[2].data.songs
					}
					//获取评论榜
					if(res[3].data.code == 200) {
						console.log(res[3])
						this.commentList = res[3].data.hotComments
					}
					
					//获取歌曲URL
					if(res[4].data.code == 200  ) {
						
						
						console.log(res[4]);
						uni.hideToast();
						//判断歌曲地址是否存在
						if(res[4].data.data[0] != undefined ) {
							
							this.songUrl = res[4].data.data[0].url;
							
							// #ifdef H5
							if(!this.innerAudioContext) {
								this.innerAudioContext = uni.createInnerAudioContext();
								this.audioIns = this.innerAudioContext;
								this.audioIns.autoplay = true
								
								
								//添加歌曲实例到仓库，已被下次销毁
								this.$store.commit("addAodioIns", this.audioIns)
							}
							// #endif
							// #ifndef H5
							this.audioIns = uni.getBackgroundAudioManager();
							
							// #endif
							
							this.audioIns.title = this.songName;
							this.audioIns.src = this.songUrl || {};
							
							
							// #ifndef H5
							// coverImgUrl 设置封面图url
							
							this.audioIns.coverImgUrl = this.songData.data.songs[0].al.picUrl
							
							// this.audioIns.coverImgUrl = this.songData.data.songs[0].al.picUrl
							
							// #endif
							
							
							//播放音频的回调
							this.audioIns.onPlay(() => {
								
								this.isPlay = true
								
								
								console.log(this.lyricList)
								//开始调用歌词
								this.showLyric()
							})
							//暂停音频的回调
							this.audioIns.onPause(() => {
								this.cancelsetTimeout()
								this.isPlay = false 
								
								//分割歌词列表
								// this.lyricList = this.lyricList.slice(this.lyricIndex)
								
								//重置歌词索引
								// this.lyricIndex = 0
								
							})
							//播放完成的回调
							this.audioIns.onEnded(() => {
								
								//清除歌词列表
								this.lyricList = []
								
								this.cancelsetTimeout()
								
								console.log("播放完成了,下一首")
								//获取下一首歌曲id
								const nextId = this.$store.getters.getNextSongId
								console.log(nextId)
								if(nextId.length != 0) {
									this.getMusic(nextId)
								}else {
									this.toPlay()
								}
								
							})
						}else {
							uni.showToast({
								title: "没有这首歌的资源",
								icon:"none"
							})
						}
						
					}
					console.log(res)
				})
			},
			
			playList(songList) {
				let tempSongIdList = []
				console.log(songList)
				songList.forEach(item => {
					tempSongIdList.push(item.id)
				})
				//改变vuex中歌曲列表
				this.$store.commit('idList',tempSongIdList)
				console.log(tempSongIdList)
				//改变下一首歌的id
				this.$store.commit("nextId", tempSongIdList[0])
				//播放列表第一手歌曲
				this.playOther(tempSongIdList[0])
				
			}
		},
		onReady() {
			
			console.log('渲染完成')
		},
		onLoad(options) {
			console.log(options)
			console.log("onload重新加载了")
			// #ifdef H5
			if(this.$store.getters.getPreviousAodioIns != '') {
				console.log(this.$store.getters.getPreviousAodioIns)
				//销毁上一首歌曲的实例
				this.$store.getters.getPreviousAodioIns.destroy()
			}
			// #endif
			
			this.lyricList = []
			// #ifdef H5
			let routes = getCurrentPages();
			let curParam = routes[routes.length - 1].options;
			
			
			console.log(curParam)
			this.songId = curParam.songId
			// #endif
			
			// #ifndef H5
			this.cancelsetTimeout()
			console.log(options.songId)
			this.songId = options.songId;
			// #endif
			
			
			
			
			
			this.getMusic(this.songId)
			
			
		
			
			
		},
		onUnload() {
			this.cancelsetTimeout()
			console.log("页面卸载了")
			// #ifdef H5
			// this.isPlay = false 
			// if(this.audioIns != undefined || this.audioIns != null) {
			// 	this.audioIns.destroy()
			// }
			// #endif
			
		},
		onHide() {
			
			console.log("页面进入后台")
		},
		deactivated() {
			
		}
		
		
	}
</script>

<style scoped>
	.title text {
		color: #FFF;
	}
	.scroll-container {
		
		height: calc(100vh - 75px);
	}
	.song-detail-bg {}
	
	.bofang-area {position: relative; width: 750rpx; height:840rpx;}
	
	.bofang-area-on { 
		position: absolute; z-index: 10; 
		transform: scale(1.5);
		left: 50%;
		top: -184rpx;
		
	}
	.bofang-area-on image {
		width:200rpx;height:300rpx; 
		transform-origin: left top;
		transform: rotate(4deg);
		transition: all 1s;
	}
	.bofang-area-on .notplay {
		transform: rotate(-7deg);
	}
	
	/* .bofang-area-on image:nth-of-type(1) {
		position: absolute;
		transform-origin: left top;
		transform: rotate(-4deg);
		z-index: 11;
		transform: scale(1.4);
		left: 12rpx;
		top: -16rpx;
		width: 50rpx;
		height: 50rpx;
	} */
	.bofang-area-bg {position: relative; z-index: 9; margin: 230rpx auto 0; background: url(@/static/disc.png);width: 590rpx;height: 590rpx;background-size: cover;}
	
	.bofang-area-image image {
		width: 372rpx;
		height:  372rpx; 
		border-radius: 50%; 
		margin-top: 110rpx; 
		margin-left: 110rpx;
		animation: move 10s linear infinite;
		animation-play-state: paused;
	}
	
	.bofang-area-image .play {
		animation-play-state: running;
	}
	@keyframes move{
		from{transform: rotate(0deg);}
		to{transform: rotate(360deg);}
	}
	
	.bofang-area-image text {
		position: absolute;
		font-size: 100rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #fff;
	}
	.bofang-area-image text:nth-of-type(2) {
		/* margin-top: 9rpx; */
		font-size: 84rpx;
	}
	
	/* 歌词区域 */
	.lyric-area {
		position: relative;
		box-sizing: border-box;
		z-index: 11;
		width: 100%;
		height: 222rpx;
		margin-top: -200rpx;
		line-height: 74rpx;
		font-size: 34rpx;
		text-align: center;
		color: #6d6e71;
		overflow: hidden;
		border: 1prx solid #0077AA;
	}
	.song-word {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		top: 0;
		transition: all 0.5s;
	}
	.active-word {
		font-size: 40rpx; 
		color: #fff;
	}
	/* .dowload-app {
		position: relative;
		z-index: 9;
		text-align: center;
		text-decoration: underline;
		width: 100%;
		line-height: 74rpx;
		font-size: 40rpx;
		color: #fff;
	} */
	
	.do-you-like {width: 100%;}
	.do-you-like-text {
		display: flex; 
		justify-content: 
		space-between; 
		padding: 0 30rpx;
		margin: 20rpx 0;
		color: #fff;
	}
	.do-you-like-text text:nth-of-type(2){
		display: block;
		font-size: 30rpx;
		line-height: 40rpx;
		border:1px solid rgba(255,255,255,.1);
		padding: 4rpx 10rpx;
		border-radius: 24rpx;
		
	}
	.do-you-like-text text:nth-of-type(2) text{
		font-size: 24rpx;
	}
	.do-you-like-item {
		display: flex;
		height: 86rpx;
		font-size: 30rpx;
		padding: 0 30rpx;
		justify-content: space-between;
		margin: 30rpx 0;
		
		
		
	}
	.do-you-like-item view {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.do-you-like-item view:nth-of-type(1) image{
		width: 86rpx;
		height: 86rpx;
		border-radius: 10rpx;
		
	}
	.do-you-like-item view:nth-of-type(2) {
		padding-top: 10rpx;
		flex: 1;
		margin-left: 20rpx;
		color: #FFF;
	}
	.do-you-like-item view:nth-of-type(2) view {
		font-size: 24rpx;
		color: #cecece;
		
	}
	
	.do-you-like-item view:nth-of-type(3) text {
		line-height: 86rpx;
		color: #fff;
		font-size: 50rpx;
	}
	
	
	/* 精彩评论 */
	.user-talk {
		width: 100%;
		padding: 30rpx;
		
	}
	.user-talk view:nth-of-type(1) {
		font-size: 34rpx;
		color: #fff;
	}
	.user-talk-item {
		
	}
	.user-talk-item view:nth-of-type(2) {
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx 30rpx 20rpx 110rpx ;
		/* padding: 20rpx 30rpx; */
		margin-left: -30rpx;
		line-height: 54rpx;
		font-size: 30rpx;
	}
	.user-talk-item view:nth-of-type(2) text {
		font-size: 30rpx;
		color: #fff;
	}
	.user-info {
		position: relative;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.user-info image {
		
		width: 66rpx;
		height: 66rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		
	}
	
	
	
	
	.user-info view:nth-of-type(2) {
		width: 300px;
		height: 64rpx;
		line-height: 32rpx;
		margin-left: -40px;
		flex: 1;
	}
	.user-info view:nth-of-type(2) text:nth-of-type(1) {
		font-size: 22rpx;
		color: #a0a0a3;
		color: #cecece;
	}
	.user-info view:nth-of-type(2) view {
		font-size: 14rpx;
		white-space: nowrap;
		color: #969793;
	}
	.user-info view:nth-of-type(3)  {
		color: #cecece;
		
	}
	
	/* #ifndef H5 */
	.user-info .dianzan {
		flex: 1;
		/* margin-left: 370rpx; */
		margin-right: -430rpx;
		line-height: 66rpx;
	}
	.user-info .dianzan text:nth-child(1) {
		position: absolute;
		/* right: 50rpx; */
		font-size: 18rpx;
		top:4rpx;
		right:104rpx;
	}
	
	/* #endif */

	/* #ifdef H5 */
	.user-info .dianzan {
		flex: 1;
		text-align: right;
	}
	.user-info .dianzan text:nth-child(1) {
		 font-size: 18rpx;
	
	}
	/* #endif */
	
	
	
	.isline {
		width: 606rpx;
		height: 0;
		margin: 20rpx 0 20rpx 84rpx;
		border: 1px solid rgba(147, 149, 152,.1)
	}
</style>
